<!--
 * @Author: 一路向阳 tt_sunzhenfeng@163.com
 * @Date: 2024-05-26 17:36:08
 * @LastEditors: 一路向阳 tt_sunzhenfeng@163.com
 * @LastEditTime: 2024-05-27 16:55:15
 * @FilePath: \vue3_nuxt_demo\components\NotePart.vue
 * @Description: 文章组件
-->

<template>
  <div class="note-part-container">

    <template v-if="pageConfig.loading">
      <div class="note-spin-container">
        <a-spin tip="Loading..."></a-spin>
      </div>
    </template>

    <template v-else>

      <div class="note-header-container">
        <div class="add-note" @click="handleAddNote">
          <i-ep-circle-plus-filled style="margin: 0 10px;" /> 新建文章
        </div>
      </div>

      <div class="note-content-container">
        <div class="note-content-item" v-for="(item, index) in notes" :key="item.id"
          :class="active === index ? 'active' : ''" @click="handleNote(item, index)">
          <i-ph-file-text-fill class="text-icon" />
          <span>{{ item.title }}</span>
          <a-dropdown v-if="active === index" :trigger="['click']" overlayClassName="overlayClassName">
            <a style="color: #595959" @click.prevent>
              <i-ant-design-setting-filled />
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item @click="() => { }">
                  <a-row type="flex" justify="center" align="middle">
                    <i-mdi-share style="margin-right: 5px" />
                    直接发布
                  </a-row>
                </a-menu-item>
                <a-menu-item @click="() => { }">
                  <a-row type="flex" justify="center" align="middle">
                    <i-ep-folder-opened style="margin-right: 5px" />
                    移动文章
                  </a-row>
                </a-menu-item>
                <a-menu-item @click="handleDeleteNote(item)">
                  <a-row type="flex" justify="center" align="middle">
                    <i-ep-delete style="margin-right: 5px" />
                    删除文章
                  </a-row>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </div>

    </template>

  </div>

  <!-- 新建文集 -->
  <a-modal v-model:open="addNoteModel" title="新建文章" okText="确定" cancelText="取消" @ok="handleAddOk">
    <a-input v-model:value="noteName" placeholder="请输入文章名称..."></a-input>
  </a-modal>

  <!-- 删除文集 -->
  <a-modal v-model:open="deleteNoteModel" title="删除文章" okText="确定" cancelText="取消" @ok="handleDeleteOk">
    <div style="margin-top: 30px">确认删除文章《{{ noteName }}》，文章将被移动到回收站。</div>
  </a-modal>
</template>

<script setup>
import _ from 'lodash-es';
import { nodetsList } from '@/apis/notebook';
import { addNote, deleteNote } from '@/apis/note';

const props = defineProps({
  noteBookNode: {
    type: Object,
    default: () => ({})
  },
  node: {
    type: Object,
    default: () => ({})
  },
  active: {
    type: Number,
    default: 0
  }
});

const { $message } = useNuxtApp();

const emit = defineEmits(['check']);
// 选中文集
const handleNote = (item, index) => {
  emit('check', item, index);
}

// 文章列表配置
const notes = ref([]);
const pageConfig = reactive({
  loading: false
});
const initLoadNote = async () => {
  pageConfig.loading = true;
  const { data } = await nodetsList({
    query: {
      notebookId: props.noteBookNode.value.id
    }
  }).finally(() => pageConfig.loading = false);

  if (data?.data) {
    notes.value = data.data;
    // 判断如果有数据，则默认选中第一个
    const headNode = _.head(data?.data);
    if (headNode) {
      handleNote(headNode, 0);
    }
  }
}

// 文章名称
const noteName = ref('');
// 新建文章弹框
const addNoteModel = ref(false);
// 新建文章
const handleAddNote = () => addNoteModel.value = true;

const handleAddOk = async () => {
  const { data } = await addNote({
    body: {
      notebookId: props.noteBookNode.value.id,
      name: noteName.value
    },
  }).finally(() => addNoteModel.value = false);

  if (data.success) {
    $message.success(data.msg);
  }
  else {
    $message.error(data.msg);
  }
  initLoadNote();
}


// 删除文章弹框
const deleteNoteModel = ref(false);
// 删除文集
const handleDeleteNote = async item => {
  noteName.value = item.title;
  deleteNoteModel.value = true;
}

// 确认删除文集
const handleDeleteOk = async () => {
  const { data } = await deleteNote({
    body: {
      noteId: props.node.value.id
    },
  }).finally(() => deleteNoteModel.value = false);

  if (data.success) {
    $message.success(data.msg);
    initLoadNote();
  }
  else {
    $message.error(data.msg);
  }
}

// 监听node节点的变化
watch(props.noteBookNode, () => initLoadNote());
</script>

<style lang="less" scoped>
.note-part-container {
  width: 100%;
  min-width: 400px;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-right: 1px #E8E8E8 solid;

  .note-spin-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .note-header-container {
    display: flex;
    align-items: center;
    padding: 20px 15px;
    width: 100%;

    .add-note {
      display: flex;
      align-items: center;
      cursor: pointer;
    }
  }

  .note-content-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100% - 62px);

    .active {
      background-color: #E6E6E6;
      border-left: 3px #EC7259 solid;
      padding-left: 17px !important;
    }

    .note-content-item {
      border-bottom: 1px #E8E8E8 solid;
      padding: 10px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;

      .text-icon {
        color: #BEBEBE;
        font-size: 25px;
      }

      span {
        font-size: 16px;
        color: #595959;
        margin-left: 10px;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
      }
    }
  }
}
</style>